<template>
	<div class="newsongrecommend">
		<!-- 固定在顶部的内容 -->
		<div class="nav-fd">
			<div class="get-App ">
				下载App
			</div>
			<div class="serch-logo ">
				<van-icon name="search" size="0.775rem" />
			</div>
		</div>
		<!-- 歌曲内容 -->
		<div class="music-information">
			<!-- 歌名部分 -->
			<div class="music-title">
				<p class="name">
					<span class="icon">
						标准
						<van-icon name="arrow-down" />
					</span>
					<span class="song">{{infogm}}</span>
				</p>
				<p class="name">{{infogmname}}</p>
			</div>
			<!-- 歌词部分 -->
			<div class="music-lyric van-picker-gai">
				<van-picker :columns="columns"  class="van-picker__mask-gai"/>
			</div>
			<!-- 小功能部分 -->
			<div class="music-func">
				<p class="content">
					<van-icon name="like-o paing" />
					<van-icon name="chat-o paing" />
					<van-icon name="back-top" class="back-top paing" />
				</p>
			</div>
			<!-- 播放按键 -->
			<div class="music-play">
				<audio :src="singsong" controls="controls" class="palyar">
				</audio>
			</div>
			<!-- 功能广告2 -->
			<div class="music-func2 dp-fl">
				<div class=" public-frame">高品质下载</div>
				<div class=" public-frame">手机铃声设置</div>
			</div>
		</div>
		<!-- 所属专辑 -->
		<div class="album">
			<div class="title">
				所属专辑
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img1" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogm}}<span>{{math1}}</span></p>
					<p>{{time}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
			<van-divider />
			<div class="song-sheet">
				<div class="fl-le title-font">
					<p>{{infogm}}</p>
					<p>{{infogmname}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="back-top" />
				</div>
			</div>
		</div>
		<!-- 所属歌手 -->
		<div class="singer">
			<div class="title">
				所属歌手
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img22" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogmname1}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
			<van-divider />
			<div class="content-a">
				<div class="fl-le title-img">
					<img :src="img2" >
				</div>
				<div class="fl-le title-font">
					<p>{{infogmname2}}</p>
				</div>
				<div class="fl-ri title-icn">
					<van-icon name="arrow" />
				</div>
			</div>
		</div>
		<!-- 结尾 -->
		<div class="footer">
			<div class="img">
				<img :src="img4">
			</div>
			<div class="font">打开APP，找到更好听的哥</div>
		</div>
		
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				math1:'(1首)',
				time:'2020-10-23',
				infogm:'Wonder',
				infogmname:'简爱/李宜玲',
				columns: ['*该歌词暂不支持自动滚动*',
				'Wonder',
				'作词:简爱Christine Chien',
				'作曲:简爱Christine Chien、李宜玲 Elin Lee',
				'Far beyond that shining stars',
				'Where I can reach planet Mars',
				'I thought you would be there',
				'All that I found was your tears',
				'And I wonder wonder wonder',
				'who made you cry',
				'Wonder wonder wonder',
				'why you always sigh',
				'Wonder wonder',
				'when will you ever get by and be mine',
				'(And I)',
				'wonder wonder wonder',
				'who made you cry',
				'Wonder wonder wonder',
				'why you always sigh',
				'Wonder wonder',
				'when will you ever get by and be mine',
				'Oh baby you‘re fine',
				'All you ve got to give is time',
				'Let s get tipsy on wine',
				'And dance under the moonshine',
				'Forget about those lies',
				'For my love is right',
				'And I wonder wonder wonder',
				'who made you cry',
				'Wonder wonder wonder',
				'why you always sigh',
				'Wonder wonder',
				'when will you ever get by and be mine',
				'<音乐制作团队>',
				'词Lyrics：简爱Christine Chien',
				'曲Composers：简爱 Christine Chien、李宜玲 Elin Lee',
				'制作人Producers：李宜玲Elin Lee、简爱 Christine Chien',
				'OP: 当道音乐 Downtown Music',
				'SP: Warner Chappell Music, Hong Kong Limited Taiwan Branch',
				'编曲Arranger：李宜玲 Elin Lee, Queen james',
				'吉他Guitar：Jamie Wilson All other instruments: E-motion',
				'和声编写Background Vocal Arrangement：简爱 Christine Chien',
				'和声Background Vocal：简爱Christine Chien',
				'录音师Recording Engineer：陈逸宏 YiHung Chen @荒原录音室WasteLand Studio',
				'混音Mixing Engineer：Queen james, 单为明 Link Shan @Lights Up Studio.',
				'母带后期处理工程师：陈陆泰(ATai)',
				'母带后期处理录音室：原艾母带工程录音室',
				'文案 Copywriter：高亭谊 Evy Kao @ ANDmusic Service Lab',
				'制作发行Copyright & Publishing：安玓音服 ANDmusic Service Lab Co., Ltd.',
				'代理发行 Distribution : 亚神娱乐 AsiaMuse Entertainment Co., Ltd.',
				'<MV拍摄团队>',
				'导演/摄影 Visual director: 2chillz',
				'Art assistant: Tiffany Wu',
				'场地提供：Vine Bar',
				'封面设计 Album Cover Designers：简穗于Isabelle Chien、简爱肉丝 Love & Rose',
				'Special thanks to Terence Hsieh 谢燕辉',
				
				
				],
				singsong:require('../assets/music/张韶涵-梦里花.mp3'),
				img1:require('../assets/songerimg/ChAKEV-lGd2AYnuSAG_QYIpOpoo129.jpg'),
				img2:require('../assets/songerimg/ChR461tNDV-AaFkmAAB2gh2UvQw312.jpg'),
				img22:require('../assets/songerimg/c67c039.jpg'),
				img3:[
					{src:require('../assets/songerimg/ChR45F74gPGAWgtyAABbhcLi0vs498.jpg'),name:'Dance By Myself',time:'2020-06-06'},
					{src:require('../assets/songerimg/ChR45V7wjv-AHC-FACXfrWD-QoI125.jpg'),name:'Apple 2020 (feat. 서가영 of 간첩소녀)',time:'2020-02-27'},
					{src:require('../assets/songerimg/ChR45F73RH-AWzH_ADk25E9DTs4399.jpg'),name:'The Law Of Gravity',time:'2020-04-10'},
					{src:require('../assets/songerimg/ChAKEV-pD6OAAtDRAEeyDQs3pHs089.jpg'),name:'Disco Nights',time:'2020-11-10'},
					{src:require('../assets/songerimg/ChR45F73RH-AWzH_ADk25E9DTs4399.jpg'),name:'The Law Of Gravity (Acoustic Ver.)',time:'2020-05-07'},
					{src:require('../assets/songerimg/ChAKEl_IvLWAJMEOAIvKcsqENo8390.jpg'),name:'뉴튼의 3법칙 (Laws of Motion)',time:'2020-12-04'},
					
				
				],
				img4:require('../assets/homepage1/99e28d0.png'),
				infogmname1:'简爱',
				infogmname2:'李宜玲',
			}
		},
	}
</script>

<style scoped>
*{
	box-sizing: border-box;
}
.newsongrecommend{
	background-color: #eee;
}
	/* 固定在顶部的内容开始 */
.dp-fl{
	display: flex;
	justify-content: center;
}
.fl-le{
	float: left;
}
.fl-ri{
	float: right;
}
.nav-fd{
	position: fixed!important;
	background: url(../assets/homepage1/df8724c.jpg) no-repeat;
	width: 100%;
	height: 21.74vw;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	z-index: 200;
	border-bottom: .5px solid #e0e0e0;
}
.get-App{
	padding: 0.2rem 0.175rem;
	width: 1.7rem;
	text-align: center;
	background: #e61723;
	color: #fafafa;
	font-style: normal;
}
.serch-logo{
	padding: .65rem;
}
.pd-le{
	padding-left: 0.625rem;
}
/* 固定在头部的内容结束 */
/* 歌名内容 */
.music-information{
	padding-top: 2.5rem;
	padding-left: .25rem;
	padding-right: .25rem;
	background: #f8f8f8;
}
.music-title{
	width: 100%;
}
.music-title .name{
	padding-bottom:0.1rem ;
	text-align: center;
	font-weight: 100;
	font-size: 0.25rem;
}
.music-title .name .icon{
	border: 1px solid #000000;
	padding: 0.0625rem 0.125rem;
	border-radius: 0.15rem;
	zoom: .7;
	font-weight: 700;
	font-size: .3rem;
}
.music-title .name .song{
	font-size: .45rem;
	font-weight: 700;
}
/* 歌词部分 */
.van-picker__mask{
	background-image: none !important;
}
.van-picker{
	background-color: #f8f8f8!important;
	opacity: .5;
	font-size: 0.3125rem;
}
.van-ellipsis{
	font-size: .4rem;
}
/* 功能部件 */
.music-func{
	width: 100%;
	height: 1.5rem;
	line-height: 1.5rem;
}
.music-func .content{
	text-align: center;
	zoom: 2;
}
.music-func .content .paing{
	padding: 0 .45rem;
	opacity: .6;
}
.music-func .content .back-top{
	transform: rotate(180deg);
}
/* 播放按键 */
.music-play{
	width: 100%;
}
.palyar{
	width: 100%;
	border: none;
	
}
.music-func2{
	width: 100%;
	height: 1.75rem;
	align-items: center;
}
.public-frame{
	width: 3.25rem;
	height: .95rem;
	background: #e13228;
	border-radius: 0.625rem;
	color: white;
	text-align: center;
	line-height: .95rem;
	margin: .25rem;
}
/* 所属专辑 */
.album{
	width: 100%;
	padding: .5rem .5rem;
	background: #f8f8f8;
	margin-top: 0.225rem;
}
.album .title{
	width: 100%;
	height: 1rem;
	font-size: .55rem;
}
.album .content-a{
	width: 100%;
	height: 2rem;
}
.album .content-a .title-img img{
	width: 1.75rem;
	height: 1.75rem;
}
.album .content-a .title-font{
	padding-left: 0.425rem;
}
.album .content-a .title-font p:nth-child(1){
	font-size: .45rem;
	padding-top: .35rem;
}
.album .content-a .title-font p:nth-child(2){
	opacity: .5;
}
.album .content-a .title-font p span{
	font-size: 0.0625rem;
}
.album .content-a .title-icn{
	height: 1.75rem;
	line-height: 1.75rem;
	zoom: 1.3;
}
.album .song-sheet{
	width: 100%;
	height: 2rem;
}
.album .song-sheet .title-font{
	height: 2rem;
}
.album .song-sheet .title-font p:nth-child(1){
	font-size: .45rem;
	padding-top: .35rem;
}
.album .song-sheet .title-font p:nth-child(2){
	opacity: .5;
}
.album .song-sheet .title-icn{
	height: 1rem;
	line-height: 1rem;
	transform: rotate(180deg);
	zoom: 1.6;
	opacity: .5;
}
.singer{
	width: 100%;
	padding: .5rem .5rem;
	background: #f8f8f8;
	margin-top: 0.225rem;
}
.singer .title{
	width: 100%;
	height: 1rem;
	font-size: .55rem;
}
.singer .content-a{
	width: 100%;
	height: 1.25rem;
}
.singer .content-a .title-img{
	width: 1.25rem;
}
.singer .content-a .title-img img{
	width: 100%;
	border-radius: 50%;
}
.singer .content-a .title-font{
	height: 1.25rem;
	line-height: 1.25rem;
	padding-left: .25rem;
}
.singer .song-sheet .title-font p{
	font-size: .45rem;
	padding-top: .35rem;
}
.singer .content-a .title-icn{
	height: 1.25rem;
	line-height: 1.25rem;
	zoom: 1.3;
}
/* 其他专辑模块 */
.album-module{
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-right: .25rem;
}
.album-module .module-img{
	width: 100%;
}
.album-module .module-img img{
	width: 100%;
}
.album-module .name{
	font-weight: 700;
}
.album-module .time{
	font-size: 0.15rem;
	opacity: .8;
}
.footer{
	width: 100%;
	padding: 50px 0;
	/* height: 3.5rem; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: white;
	margin-top: 0.225rem;
}
.footer .img img{
	width: 3rem;
}
.footer .font{
	width: 5.25rem;
	height: 1rem;
	background-color: #E13228;
	color: white;
	border-radius: 2.125rem;
	text-align: center;
	line-height: 1rem;
	margin-top: .225rem;
}
</style>
